<template>
	<div class="mapLeftMenu">
		<el-card class="hierarchy" :style="{'width': showHide?'auto':'300px'}">
			<div slot="header" class="clearfix">
				<span v-show="!showHide">数据管理</span>
				<el-button class="headerBtn" type="text" :icon="showHide?'el-icon-s-unfold':'el-icon-s-fold'"
					@click="putOn"></el-button>
			</div>
			<div class="bodyContent">
				<div class="hierarchyBox" v-show="!showHide">
					<el-scrollbar wrap-class="scrollbar-wrapper" style="height: calc(100% + 17px);padding: 0;">
						<div class="mapHierarchy">
							<i class="el-icon-arrow-right leftHierarchy" :class="showHierarchy?'rotateHierarchy':''"></i>
							<span @click="showHierarchy = !showHierarchy">地图图层</span>
							<el-button type="text" size="mini"  icon="el-icon-plus" style="float: right;margin-top: -5px;margin-right: 10px;">新增文件夹</el-button>
						</div>
						<div v-show="showHierarchy">
							<div class="childrenHierarchy" v-for="item in hierarchyList" :key="item.id">
								<div :class="hierarchyId==item.id? 'selectHierarchy':''">
									<i class="el-icon-arrow-right leftHierarchy" :class="item.showHierarchy?'rotateHierarchy':''" @click="selectHierarchys(item)"></i>
									<el-checkbox v-model="item.isShow" @change="parentCheckbox(item)" ></el-checkbox><span style="margin-left: 10px;" @dblclick="selectHierarchys(item)">{{ item.title }}</span>
								</div>
								<div v-if="item.children.length > 0 && item.showHierarchy">
									<div class="childrenHierarchyChildren"  v-for="child in item.children" :key="child.id">
										<!-- <el-checkbox v-model="child.isShow" :disabled="child.id=='h21'?true:false" @change="checkbox(child)"><div class="childrenHierarchyChildrenTitle">{{ child.title }}</div></el-checkbox> -->
										<div class="checkboxBox">
											<el-checkbox v-model="child.isShow" @change="checkbox(child)"></el-checkbox><div class="childrenHierarchyChildrenTitle" @click="hierarchyFyTo(child)">{{ child.title }}</div>
										</div>
									</div>
								</div>
								
							</div>
						</div>
					</el-scrollbar>
				</div>
				<div class="handleBox">
					<div class="handleImageA" v-for="item in rightHandleList" :key="item.id" :class="selectHandleImageId==item.id?'selectHandleImageIdClass':''" :title="item.title" @click="selectHandleImage(item)">
						<img class="handleImage" :src="selectHandleImageId==item.id?item.selectIcon:item.icon" alt="">
					</div>
				</div>
			</div>
		</el-card>
		<!--  bigemap-div-icon bigemap-editing-icon bigemap-touch-icon   -->	
		<!--  bigemap-draw-drag-icon   bigemap-marker-draggable -->
	</div>
</template>

<script>
	import {newBigeMap} from './utils/map.js'
	import {leftMap} from './utils/leftMenuMap.js'
	export default {
		props:['BM', 'map'],
		data() {
			return {
				showHide: false,
				rightHandleList: [
					{
						id: 'r1',
						type: '',
						title: '移动地图',
						icon: require('@/assets/image/map/1.png'),
						selectIcon: require('@/assets/image/map/b1.png')
					},
					{
						id: 'r2',
						type: 'marker',
						title: '标注',
						icon: require('@/assets/image/map/2.png'),
						selectIcon: require('@/assets/image/map/b2.png')
					},
					{
						id: 'r3',
						type: 'polyline',
						title: '线段',
						icon: require('@/assets/image/map/3.png'),
						selectIcon: require('@/assets/image/map/b3.png')
					},
					{
						id: 'r4',
						type: 'polygon',
						title: '多边形',
						icon: require('@/assets/image/map/4.png'),
						selectIcon: require('@/assets/image/map/b4.png')
					},
					{
						id: 'r5',
						type: 'circle',
						title: '圆',
						icon: require('@/assets/image/map/5.png'),
						selectIcon: require('@/assets/image/map/b5.png')
					},
					{
						id: 'r6',
						type: 'rectangle',
						title: '矩形',
						icon: require('@/assets/image/map/6.png'),
						selectIcon: require('@/assets/image/map/b6.png')
					},
					{
						id: 'r7',
						type: 'ruler',
						title: '测距',
						icon: require('@/assets/image/map/7.png'),
						selectIcon: require('@/assets/image/map/b7.png')
					}
				],
				hierarchyList: [
					{
						id: 'h1',
						title: '我的图层',
						showHierarchy: true,
						children: [],
						isShow: true
					},
					{
						id: 'h2',
						title: '基地圈定范围',
						showHierarchy: true,
						children: [],
						isShow: true
					},
					{
						id: 'h3',
						title: '栽培品种管理',
						showHierarchy: true,
						children: [],
						isShow: true
					}
				],
				showHierarchy: true,
				selectHandleImageId: 'r1',
				mapDraws: {},
				hierarchyId: 'h1',
				variety: {
					varietyId: '',
					varietyIndex: '',
				}
			}
		},
		mounted() {
			leftMap.init(this).then(res=>{
				// 编辑组件初始化完成
				// 判断是否有果园名称
				if(this.$route.query.name){
					let data = {
						id: 'h21',
						title: this.$route.query.name,
						isShow: true
					}
					this.hierarchyList[1].children.push(data)
				}
				// 判断新建基地的时候是否有传varietyId和varietyIndex
				
				if(this.$route.query.varietyId!='' && this.$route.query.varietyIndex!='' && this.$route.query.baseType == 'noBaseId'){
					this.variety.varietyId = this.$route.query.varietyId
					this.variety.varietyIndex = this.$route.query.varietyIndex
					// 设置层级id
					leftMap.setHierarchy('h3', '栽培品种管理')
					this.hierarchyId = 'h3'
				}
			})
		},
		methods: {
			putOn: function() {
				// 显示隐藏层级目录
				this.showHide = !this.showHide
			},
			selectHandleImage: function (item){
				// 选择绘画工具
				if (item.type !== '') {
					document.getElementById('mapBIGENAP').style.cursor = 'crosshair'
				} else{
					document.getElementById('mapBIGENAP').style.cursor = '-webkit-grab'
				}
				this.selectHandleImageId = item.id
				leftMap.mapDrawing(item.type)
			},
			selectHierarchys: function(item){
				// 选择层级目录，
				this.hierarchyId = item.id
				item.showHierarchy = !item.showHierarchy
				// 设置层级id
				leftMap.setHierarchy(item.id, item.title)
			},
			getFromJsData: function(data){
				// 获取来自js的数据
				this.hierarchyList.forEach(h=>{
					if(h.id == data.pId){
						h.children.push(data)
					}
				})
			},
			updateLeftMenuData: function(data){
				// 更新所有层级数据
				let upDateData = ''
				this.hierarchyList.forEach(v=>{
					// 找到当前操作元素的层级
					if(v.id == data.oldPId){
						v.children.forEach((c, i)=>{
							// 找到当前元素
							if(c.id == data.objId){
								upDateData = c
								// 删除元素
								v.children.splice(i, 1)
							}
						})
					}
				})
				if (data.oldPId&&data.newPId) {
					// console.log('更改了层级')
					if(upDateData){
						this.getFromJsData(upDateData)
					}
				} else{
					// console.log('删除了元素')
				}
			},
			// 复选框
			checkbox: function(e){
				if(e.isShow){
					let data = newBigeMap.customData.get(e.id)
					newBigeMap.applyColoursToDrawingOne(data)
					// console.log()
					// console.log(e)
				} else {
					let data = newBigeMap.mapDataLarey.get(e.id)
					data.remove()
				}
			},
			// 父级复选框
			parentCheckbox: function(e){
				console.log(e)
				// 判断该目录下是否存在图层,如果存在,isShow为true的情况下全部显示,否则全部隐藏,如果没有数据不做任何操作
				if(e.children.length > 0){
					// 当前目录存在的图层是否显示全部去反值
					e.children.forEach(v=>{
						v.isShow = !v.isShow
						if(v.isShow){
							let data = newBigeMap.customData.get(v.id)
							newBigeMap.applyColoursToDrawingOne(data)
						} else {
							let data = newBigeMap.mapDataLarey.get(v.id)
							data.remove()
						}
					})
				}
			},
			// 点击层级目录飞图
			hierarchyFyTo: function(e){
				let data = newBigeMap.mapDataLarey.get(e.id)
				if (data.type === 'marker') {
					this.map.flyToBounds([e.latLng]);
				} else {
					this.map.flyToBounds(data.getBounds());
				}
				// this.map.flyToBounds(data.getBounds());
				// newBigeMap.flyTo(e.centralPoint, 17)
			}
		}
	}
</script>

<style scoped="scoped">
	.mapLeftMenu {
		position: fixed;
		top: 11px;
		left: 11px;
		z-index: 9;

	}

	.hierarchy {
		width: 300px;
		transition: all .2s;
	}

	.hierarchy>>>.el-card__header {
		padding: 0 !important;
	}

	.clearfix{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.bodyContent{
		display: flex;
		justify-content: space-between;
	}
	.clearfix{
		padding: 10px 20px;
	}

	.headerBtn {
		font-size: 24px;
	}
	.hierarchyBox{
		border-right: 1px solid #DEDEDE;
		/* min-height: 360px; */
		height: 600px;
		overflow-y: hidden;
		/* padding-right: 18px; */
		width: 212px;
	}
	.handleBox{
		/* padding-left: 20px; */
		width: 34px;
	}
	.handleImageA{
		padding: 3px;
		margin-bottom: 20px;
		width: 34px;
		height: 34px;
	}
	.handleImageA:last-child{
		margin-bottom: 0;
	}
	.handleImage{
		width: 28px;
		cursor: pointer;
	}
	
	.mapHierarchy,.childrenHierarchy{
		margin-bottom: 10px;
	}
	.mapHierarchy span,.childrenHierarchy span{
		cursor: pointer;
	}
	
	.childrenHierarchy,.childrenHierarchyChildren{
		padding-left: 25px;
		word-break: break-all;
		line-height: 30px;
	}
	.leftHierarchy{
		margin-right: 10px;
		transition: all .2s;
		transform: rotate(0deg);
	}
	.rotateHierarchy{
		transform: rotate(90deg);
	}
	.selectHandleImageIdClass{
		overflow: hidden;
		background: #24B14E;
	}
	.childrenHierarchyChildrenTitle{
		width: 120px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		position: relative;
		/* top: 4px; */
		margin-left: 10px;
		cursor: pointer;
	}
	.selectHierarchy{
		background: rgba(36,177,78,0.7);
		color: #FFFFFF;
		margin-left: -25px;
		padding-left: 25px;
		position: relative;
	}
	.selectHierarchy::before{
		content: '';
		position: absolute;
		width: 4px;
		height: 100%;
		top: 0;
		left: 0;
		bottom: 0;
		background: #24B14E;
	}
	.checkboxBox{
		display: flex;
		justify-content: flex-start;
	}
</style>
